<template>
  <div class="w-full h-full p-2 bg-sky-50">
    <!-- 第一行 -->
    <div class="h-1/3 text-blue-400 font-bold flex">
      <div class="w-3/12 h-full pr-2">
        <el-card class="h-full p-4 custom-card">
          <div class="h-10 flex justify-center items-center">
            <h1 class="text-3xl">门诊运营核心指标看板</h1>
          </div>
          <div
            class="w-full rounded-3xl p-4 text-white"
            style="
              background-image: linear-gradient(to right, #3e81fd, #91f1ed); height: 21vh;
            "
          >
            <ExpenseHospital class="inline-block w-20 h-20" style="fill: #7cba59" />
            <div class="-mt-16 ml-28">
              <p class="w-1/2 inline-block">门急诊人次</p>
              <p class="w-1/2 inline-block font-bold text-4xl">52161</p>
            </div>
            <div class="mt-6 flex">
              <span class="w-1/2 text-sm"
                >目标<span class="text-red-500 text-base"> 81545 </span
                >完成进度：</span
              >
              <span class="w-1/2 mt-1">
                <el-progress
                  :text-inside="true"
                  :stroke-width="14"
                  :percentage="63.97"
                  color="#071691"
                />
              </span>
            </div>
            <div class="w-full h-1 border-b-2 border-blue-700 mt-2" />
            <div class="flex justify-between mt-2">
              <span class="demonstration text-sm mt-0.5"
                >选择 年 & 月 & 日：</span
              >
              <span>
                <el-date-picker
                  v-model="dateTime"
                  type="date"
                  placeholder="请选择"
                  :disabled-date="disabledDate"
                  :shortcuts="shortcuts"
                  size="small"
                  style="width: 150px"
                />
              </span>
            </div>
          </div>
        </el-card>
      </div>
      <div class="w-2/12 h-full pr-2">
        <el-card class="h-full p-2 custom-card">
          <Title title="门诊运营指标" color="#613B8C" />
          <ul>
            <li v-for="item in data" class="h-10 ml-8">
              <span>{{ item.name }}</span
              ><span>{{ item.value }}</span>
            </li>
          </ul>
        </el-card>
      </div>
      <div class="w-4/12 h-full pr-2">
        <el-card class="h-full p-2 custom-card">
          <Title title="门诊收入来源" color="#F5D400" />
          <div class="w-full" style="height: 23vh">
            <PieChart
              :data="pieData"
              :position="position"
              :showLabel="showLabel"
              class="w-full h-full"
            />
          </div>
        </el-card>
      </div>
      <div class="w-4/12 h-full pr-2">
        <el-card class="h-full p-2 custom-card">
          <Title title="门诊收入类型" color="#E880A2" />
          <div class="w-full" style="height: 23vh">
            <PieChart
              :data="pieData2"
              :position="position"
              :showLabel="showLabel"
              class="w-full h-full"
            />
          </div>
        </el-card>
      </div>
    </div>
    <!-- 第二行 -->
    <div class="h-1/3 text-blue-400 font-bold flex">
      <div class="w-1/4 h-full pr-2 pt-2">
        <el-card class="h-full p-2 custom-card">
          <Title title="科室床位使用率排名" color="#66C1D1" />
          <div class="w-full" style="height: 22.5vh">
            <BarChart
              :data="barData"
              unit="%"
              title="单位"
              :chartInfo="barChartInfo"
              class="w-full h-full"
            />
          </div>
        </el-card>
      </div>
      <div class="w-1/4 h-full pr-2 pt-2">
        <el-card class="h-full p-2 custom-card">
          <Title title="科室门诊人次排名" color="#613B8C" />
          <div class="w-full" style="height: 22.5vh">
            <BarChart
              :data="barData2"
              unit="人次"
              title="单位"
              :chartInfo="barChartInfo"
              class="w-full h-full"
            />
          </div>
        </el-card>
      </div>
      <div class="w-1/4 h-full pr-2 pt-2">
        <el-card class="h-full p-2 custom-card">
          <Title title="科室收入排名" color="#F5D400" />
          <div class="w-full" style="height: 22.5vh">
            <BarChart
              :data="barData3"
              unit="万元"
              title="单位"
              :chartInfo="barChartInfo"
              class="w-full h-full"
            />
          </div>
        </el-card>
      </div>
      <div class="w-1/4 h-full pr-2 pt-2">
        <el-card class="h-full p-2 custom-card">
          <Title title="科室次均费用排名" color="#E880A2" />
          <div class="w-full" style="height: 22.5vh">
            <BarChart
              :data="barData4"
              unit="元"
              title="单位"
              :chartInfo="barChartInfo"
              class="w-full h-full"
            />
          </div>
        </el-card>
      </div>
    </div>
    <!-- 第三行 -->
    <div class="h-1/3 text-blue-400 font-bold flex">
      <div class="w-1/3 h-full pr-2 pt-2">
        <el-card class="h-full p-2 custom-card">
          <Title title="科室床位使用率排名" color="#66C1D1" />
          <div class="w-full" style="height: 22.5vh">
            <Table
              :tableData="tableData"
              :tableColumns="tableColumns"
              :color="colorInfo"
            />
          </div>
        </el-card>
      </div>
      <div class="w-1/3 h-full pr-2 pt-2">
        <el-card class="h-full p-2 custom-card">
          <Title title="科室门诊人次排名" color="#613B8C" />
          <div class="w-full" style="height: 22.5vh">
            <Table
              :tableData="tableData2"
              :tableColumns="tableColumns2"
              :color="colorInfo2"
            />
          </div>
        </el-card>
      </div>
      <div class="w-1/3 h-full pr-2 pt-2">
        <el-card class="h-full p-2 custom-card">
          <Title title="科室收入排名" color="#F5D400" />
          <div class="w-full" style="height: 22.5vh">
            <Table
              :tableData="tableData3"
              :tableColumns="tableColumns3"
              :color="colorInfo3"
            />
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import ExpenseHospital from "@/assets/svg/expense_hospital.svg?component";

// 日期选择框处理流程
const dateTime = ref<string>("");
const shortcuts = [
  {
    text: "今天",
    value: new Date()
  },
  {
    text: "昨天",
    value: () => {
      const date = new Date();
      date.setTime(date.getTime() - 3600 * 1000 * 24);
      return date;
    }
  },
  {
    text: "一周前",
    value: () => {
      const date = new Date();
      date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
      return date;
    }
  }
];
const disabledDate = (time: Date) => {
  return time.getTime() > Date.now();
};

// 标题
import Title from "./title.vue";
const data = reactive<Array>([
  { name: "全院CMI值", value: "2.74" },
  { name: "病床使用率", value: "68.00%" },
  { name: "平均住院日", value: "5.75" },
  { name: "三四级手术", value: "1161" },
  { name: "一二级手术", value: "4323" }
]);

// 收集构成种类
import PieChart from "./pieChart.vue";
// 门诊收入来源
const pieData = reactive<Array>([
  { name: "医保收入", value: 39.6 },
  { name: "门诊收入", value: 60.4 }
]);
// 门诊收入类型
const pieData2 = reactive<Array>([
  { name: "药品收入", value: 11.6 },
  { name: "治疗收入", value: 9.2 },
  { name: "检查费", value: 12.1 },
  { name: "挂号费", value: 15.9 },
  { name: "卫生材料费", value: 19.1 },
  { name: "化验费", value: 13.4 },
  { name: "其他收入", value: 18.7 }
]);
// 饼图位置
const position = reactive<Object>({
  pie: ["35%", "50%"],
  radius: ["65%", "80%"],
  legend: "5%"
});
// 是否展示label
const showLabel = ref<Boolean>(true);

// 柱状图
import BarChart from "./barChart.vue";
// 科室床位使用率排名
const barData = reactive<Array>([
  { name: "神经科", value: 7032 },
  { name: "儿科", value: 6389 },
  { name: "麻醉科门诊", value: 3534 },
  { name: "内科", value: 7267 },
  { name: "中医科", value: 7512 },
  { name: "感染科", value: 5813 },
  { name: "肿瘤科", value: 5554 },
  { name: "全科医学门诊", value: 4012 },
  { name: "骨科", value: 4825 },
  { name: "妇产科", value: 4389 },
  { name: "外科", value: 8000 },
  { name: "急诊科", value: 5090 }
]);
// 科室门诊人次排名
const barData2 = reactive<Array>([
  { name: "感染科", value: 8000 },
  { name: "急诊科", value: 7512 },
  { name: "肿瘤科", value: 7267 },
  { name: "中医科", value: 5090 },
  { name: "儿科", value: 6389 },
  { name: "神经科", value: 7032 },
  { name: "外科", value: 5813 },
  { name: "妇产科", value: 4389 },
  { name: "内科", value: 5554 },
  { name: "全科医学门诊", value: 4012 },
  { name: "骨科", value: 4825 },
  { name: "麻醉科门诊", value: 3534 }
]);
// 科室收入排名
const barData3 = reactive<Array>([
  { name: "急诊科", value: 5090 },
  { name: "外科", value: 8000 },
  { name: "神经科", value: 7032 },
  { name: "儿科", value: 6389 },
  { name: "感染科", value: 5813 },
  { name: "肿瘤科", value: 5554 },
  { name: "内科", value: 7267 },
  { name: "骨科", value: 4825 },
  { name: "妇产科", value: 4389 },
  { name: "中医科", value: 7512 },
  { name: "全科医学门诊", value: 4012 },
  { name: "麻醉科门诊", value: 3534 }
]);
// 科室次均费用排名
const barData4 = reactive<Array>([
  { name: "肿瘤科", value: 7267 },
  { name: "急诊科", value: 7512 },
  { name: "感染科", value: 8000 },
  { name: "儿科", value: 6389 },
  { name: "中医科", value: 5090 },
  { name: "妇产科", value: 4389 },
  { name: "外科", value: 5813 },
  { name: "神经科", value: 7032 },
  { name: "麻醉科门诊", value: 3534 },
  { name: "内科", value: 5554 },
  { name: "骨科", value: 4825 },
  { name: "全科医学门诊", value: 4012 }
]);
const barChartInfo = reactive<object>({
  grid: {
    top: "15%",
    left: "2%",
    right: "2%",
    bottom: "0%",
    containLabel: true
  },
  barWidth: 15,
  interval: 2
});

// 表格
import Table from "./table.vue";
// 科室床位使用率排名
const tableColumns = reactive<Array>([
  { name: "科室", field: "department" },
  { name: "门诊人次", field: "patient" },
  { name: "去年门诊人次", field: "patient2" },
  { name: "前年门诊人次", field: "patient3" }
]);
const tableData = reactive<Array>([
  {
    department: "肿瘤科",
    patient: 13447,
    patient2: 13112,
    patient3: 12982
  },
  {
    department: "感染科",
    patient: 13447,
    patient2: 13112,
    patient3: 12982
  },
  {
    department: "呼吸科",
    patient: 13447,
    patient2: 13112,
    patient3: 12982
  },
  {
    department: "儿科",
    patient: 13447,
    patient2: 13112,
    patient3: 12982
  },
  {
    department: "外科",
    patient: 13447,
    patient2: 13112,
    patient3: 12982
  },
  {
    department: "妇产科",
    patient: 13447,
    patient2: 13112,
    patient3: 12982
  },
  {
    department: "神经科",
    patient: 13447,
    patient2: 13112,
    patient3: 12982
  }
]);
const colorInfo = reactive<Array>([
  "rgba(64, 195, 200, 0.9)",
  "rgba(64, 195, 200, 0.3)"
]);
// 科室门诊人次排名
const tableColumns2 = reactive<Array>([
  { name: "科室", field: "department" },
  { name: "医保支付", field: "insurance" },
  { name: "去年医保支付", field: "insurance2" },
  { name: "前年医保支付", field: "insurance3" }
]);
const tableData2 = reactive<Array>([
  {
    department: "肿瘤科",
    insurance: 13447,
    insurance2: 13112,
    insurance3: 12982
  },
  {
    department: "感染科",
    insurance: 13447,
    insurance2: 13112,
    insurance3: 12982
  },
  {
    department: "呼吸科",
    insurance: 13447,
    insurance2: 13112,
    insurance3: 12982
  },
  {
    department: "儿科",
    insurance: 13447,
    insurance2: 13112,
    insurance3: 12982
  },
  {
    department: "外科",
    insurance: 13447,
    insurance2: 13112,
    insurance3: 12982
  },
  {
    department: "妇产科",
    insurance: 13447,
    insurance2: 13112,
    insurance3: 12982
  },
  {
    department: "神经科",
    insurance: 13447,
    insurance2: 13112,
    insurance3: 12982
  }
]);
const colorInfo2 = reactive<Array>([
  "rgba(96, 59, 139, 0.9)",
  "rgba(96, 59, 139, 0.3)"
]);
// 科室收入排名
const tableColumns3 = reactive<Array>([
  { name: "科室", field: "department" },
  { name: "现金支付", field: "cash" },
  { name: "去年现金支付", field: "cash2" },
  { name: "前年现金支付", field: "cash3" }
]);
const tableData3 = reactive<Array>([
  {
    department: "肿瘤科",
    cash: 13447,
    cash2: 13112,
    cash3: 12982
  },
  {
    department: "感染科",
    cash: 13447,
    cash2: 13112,
    cash3: 12982
  },
  {
    department: "呼吸科",
    cash: 13447,
    cash2: 13112,
    cash3: 12982
  },
  {
    department: "儿科",
    cash: 13447,
    cash2: 13112,
    cash3: 12982
  },
  {
    department: "外科",
    cash: 13447,
    cash2: 13112,
    cash3: 12982
  },
  {
    department: "妇产科",
    cash: 13447,
    cash2: 13112,
    cash3: 12982
  },
  {
    department: "神经科",
    cash: 13447,
    cash2: 13112,
    cash3: 12982
  }
]);
const colorInfo3 = reactive<Array>([
  "rgba(243, 211, 0, 0.9)",
  "rgba(243, 211, 0, 0.3)"
]);
</script>

<style scoped lang="scss">
ul {
  list-style: circle inside;
}
</style>
